<template>
    <div class="headerBar">
        <div class="header-left">
            <div class="app-name">
                <div>后台管理系统模板</div>
            </div>
            <div class="breadcrumb">
                <!--<div @click="toHome()" class="app-name-home">
                    <img :src="require('@img/icon-home-golden.png')" alt="图标" width="18px" height="18px">
                    <div>首页</div>
                </div>-->
                <div>{{currentRouteTitle()}}</div>
            </div>
        </div>
        <div class="header-right">
            <fullscreen v-model="isFullscreen" class="fullscreen"></fullscreen>
            <img class="user-center-img" :src="require('@img/logo.png')" width="30px" height="30px" alt="图片">
            <div ref="headerSelect">
                <img @click.stop="clickSelect()" class="select-img" :src="require('@img/icon-select.png')" width="18px"
                     height="18px" alt="图片">
                <div v-show="showSelect" class="select-panel">
                    <div>用户：admin</div>
                    <div @click.stop="logout()" class="logout">退出登录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "headerBar",
        data() {
            return {
                showSelect: false,
                isFullscreen: false,
            }
        },
        created() {
            document.addEventListener('click', this.clickListener);
        },
        beforeDestroy() {
            document.removeEventListener('click', this.clickListener)
        },
        methods: {
            clickListener(event) {
                if (this.$refs.headerSelect && !this.$refs.headerSelect.contains(event.target)) {
                    this.showSelect = false;
                }
            },
            currentRouteTitle() {
                let text = '';
                const matched = this.$route.matched;
                for (let i in matched) {
                    const title = ' / ' + matched[i].meta.title;
                    text += title
                }
                return text.substring(2);
            },
            toHome() {
                if (this.$route.name === 'home') return;
                this.$navTo('/home')
            },
            clickSelect() {
                this.showSelect = !this.showSelect
            },
            logout() {
                this.showSelect = false;
                this.$navTo('/login')
            }
        }
    }
</script>

<style scoped>
    .headerBar {
        background: linear-gradient(to bottom, #2a2b30 0%, #292a2f 100%);
        height: 60px;
        min-height: 60px;
        color: #ffffff;
        display: flex;
        align-items: center;
        padding: 0 15px;
        justify-content: space-between;
        overflow: hidden;
    }

    .header-left {
        display: flex;
        align-items: center;
    }

    .app-name {
        font-size: 16px;
        font-weight: bold;
        color: #f6ca9d;
        width: 230px;
        display: flex;
        align-items: center;
    }

    .app-name-home {
        display: flex;
        align-items: center;
        padding-right: 15px;
        color: #f6ca9d;
        font-weight: bold;
    }

    .app-name-home:hover {
        cursor: pointer;
    }

    .breadcrumb {
        display: flex;
    }

    .user-center-img {
        border-radius: 100px;
        box-shadow: 0 0 5px 3px #f6ca9d;
        margin-right: 7px;
    }

    .header-right {
        display: flex;
        align-items: center;
        position: relative;
    }

    .select-img {
        cursor: pointer;
    }

    .select-panel {
        position: fixed;
        top: 60px;
        right: 0;
        z-index: 77;
        min-width: 90px;
        min-height: 50px;
        background: #ffffff;
        padding: 7px 14px;
        border-radius: 5px;
        box-shadow: 0 0 5px 2px #787878;
        color: #666666;
        text-align: center;
    }

    .select-panel div {
        padding: 5px 0;
    }

    .logout {
        color: #f6ca9d;
        font-weight: bold;
        cursor: pointer;
    }
</style>